<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx-yui3 - SelectField Usage</title>

    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">
    <script type="text/javascript" src="../js/inputex-loader.js"></script>
</head>

<body>
<p class='demoTitle'>
    <script>document.write(document.title)</script>
</p>

<!-- Example 1 -->
<div class='exampleDiv'>

    <p class="title">Basic SelectField creation</p>

    <p>Use the following code to create a basic inputEx SelectField.</p>

    <div class='demoContainer' id='container1'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            new Y.inputEx.SelectField({name: 'country', selectValues: ['United States of
            America','France']}).render('#container1');
        </textarea>
    </div>

</div>


<!-- Example 2 -->
<div class='exampleDiv'>

    <p class="title">Updated event</p>

    <p>How to listen to the updated event :</p>

    <div class='demoContainer' id='container2'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var el = Y.Node.get('#container2');
            var field = new Y.inputEx.SelectField({name: 'country', selectValues: ['United States of
            America','France']});
            field.render(el);

            var button1 = Y.Node.create('
            <button>SetValue with "United States of America"</button>
            ')
            var val = 'United States of America';
            el.appendChild(button1);
            button1.on("click", function() {
            field.set('value',val);
            val = (val == 'France') ? 'United States of America' : 'France';
            button1.set('innerHTML', "SetValue with '" + val + "'")
            });

            var logDiv = Y.Node.create('
            <div>Log :<br/>')
                el.appendChild(logDiv);
                field.on('field:change', function(e, value) {
                logDiv.set('innerHTML', logDiv.get('innerHTML') + "Updated at " + (new Date()) + " with value " + value
                + "<br/>");
                });
        </textarea>
    </div>

</div>

<script>
    inputEx.YUI({base:'../lib/yui3/',inputExBase:'../'}).use('selectfield', function(Y) {
        //Y.on('event:ready', function() {

        // Example 1
        new Y.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France']}).render('#container1');

        // Example 2
        var el = Y.Node.get('#container2');
        var field = new Y.inputEx.SelectField({name: 'country', selectValues: ['United States of America','France']});
        field.render(el);

        var button1 = Y.Node.create('<button>SetValue with "United States of America"</button>')
        var val = 'United States of America';
        el.appendChild(button1);
        button1.on("click", function() {
            field.set('value', val);
            val = (val == 'France') ? 'United States of America' : 'France';
            button1.set('innerHTML', "SetValue with '" + val + "'")
        });

        var logDiv = Y.Node.create('<div>Log :<br />')
        el.appendChild(logDiv);
        field.on('field:change', function(e, value) {
            logDiv.set('innerHTML', logDiv.get('innerHTML') + "Updated at " + (new Date()) + " with value " + value + "<br />");
        });

    });

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>